<template>
  <div style="height:100%">
    <!--表格渲染-->
    <DataGridTable
      :sup_this="sup_this"
      :data="configFormList"
      :show-page="false"
      :multi-select="false"
      row-key="sysGenCode">
      <el-table-column v-permission="['SYS_ADMIN','COMMON_ADMIN','WORKFLOW_CONFIG_ALL','WORKFLOW_CONFIG_CHANGE','WORKFLOW_CONFIG_CREATE']" v-if="editable" label="操作" width="130px" align="center">
        <template slot="header" slot-scope="scope">
          <el-button
            icon="el-icon-check"
            size="mini"
            style="float: right; padding: 6px 9px"
            type="primary"
            @click="addForm">选择表单</el-button>
        </template>
        <template slot-scope="scope">
          <el-popover
            :ref="scope.row.sysGenCode"
            placement="top"
            width="180">
            <p>确定要移除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.sysGenCode].doClose()">取消</el-button>
              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.sysGenCode)">确定</el-button>
            </div>
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="sysGenCode" label="表单编码"/>
      <el-table-column prop="formName" label="表单名称"/>
      <el-table-column prop="oaMenuName" label="OA菜单名"/>
    </DataGridTable>
    <formSetSelectList ref="formSetSelectList" :sup_this="sup_this" @formSelectCallback="formSelectCallback" />
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import formSetSelectList from '@/views/system/form/formSet/module/formSetSelectList'
import { getConfigFormList } from '@/api/system/workflowConfig'

export default {
  components: { formSetSelectList },
  props: {
    sup_this: {
      type: Object,
      required: true
    },
    mainId: {
      type: String,
      required: false,
      default: 'empty'
    },
    editable: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      delLoading: false,
      configFormList: []
    }
  },
  watch: {
    mainId(value) {
      if (value) {
        this.loadWorkflowFormData(value)
      } else {
        this.configFormList = []
      }
    }
  },
  created() {
  },
  methods: {
    checkPermission,
    subDelete(sysGenCode) {
      this.delLoading = true
      this.configFormList = this.configFormList.filter(item => item.sysGenCode !== sysGenCode)
      this.$refs[sysGenCode].doClose()
      this.delLoading = false
    },
    loadWorkflowFormData(mainId) {
      getConfigFormList(mainId).then(res => {
        this.configFormList = res.data
      })
    },
    addForm() {
      const _this = this.$refs.formSetSelectList
      _this.paramBean.formTypeList = ['OA', 'OTHER']
      _this.init()
      _this.dialog = true
    },
    formSelectCallback(selectedRows, formSelectObj) {
      selectedRows.forEach(row => {
        this.configFormList = this.configFormList.filter(item => item.sysGenCode !== row.sysGenCode)
        this.configFormList.push(row)
      })
      formSelectObj.cancel()
      formSelectObj.loading = false
    }
  }
}
</script>

<style scoped>
</style>
